<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>鋆钰陶瓷釉料计算器</title>
	<style>
		html{
    font-size: 36px;
		background-color: #f1f1f1;
		color: #333;
		}

		.title {
			margin: 1rem auto 0.8rem;
			font-size: 1.5rem;
			text-align: center;
			color: #cc163a;
		}

		#datetime {
			text-align: center;
			font-size: 0.8rem;
		}

		.resContainer5 {
			background-color: #fff;
			/* border: 1px solid #C2C3C6; */
			width: 90%;
			margin: 50px auto;
			font-size: 1rem;
			position: relative;
			/* height: 6rem; */
		}

		legend {
			background-color: #000;
			width: 8rem;
			text-align-last:justify;
			text-align:justify;
			text-justify:distribute-all-lines;
			color: #fff!important;
			padding: 0.2rem 0.4rem;
			font-weight: 700;
			}

		.inputContainer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 2.2rem;
		}

		.input {
			flex: 1;
		}

		.input input {
			border: 1px solid red; 
			height: 1.5rem;
			width:  100%;
			font-size: 1rem;

		}

		input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }


		.txtInput {
			width:  7rem;
			text-align: right;
			padding-right: 1rem;
		}

		.button, button {
			height: 2rem;
			font-size: 1.4rem;
			align-self: center;
			background-color: #cc163a;
			color: #fff !important;
			width: 5rem;
		}

		/* .confirm, .reset {
			padding: 0 5rem;
		} */

		#res1, #res2 {
			font-size: 1.5rem;
			font-weight: 700;
			color: #cc163a;
		}

		.resCal {
			font-size: 1rem;
			font-weight: 700;
			color: #cc163a;
		}

		.result {
			line-height: 1.5rem;
		}
	</style>

	<script>
		function  getD1(){
				var date=new Date();
				var d1=date.toLocaleString();
				document.getElementById("datetime").innerHTML =d1; 
		}
		setInterval("getD1();",1000);
	</script> 
</head>

<body onload = getD1()>
	<div class="title">鋆钰陶瓷釉浆计算器</div>
	<div id="datetime"></div>
	<fieldset class="resContainer5">
  <legend>釉浆数据输入区域</legend>
		<form action="">
			<div class="inputForm">
			
				<div class="inputContainer">
					<div class="txtInput">原有添加剂比例</div>
					<div class="input"><input type="number" id="oldAdd" min="0.01" max="100" placeholder="请数据介于0.01~100.00之间" >
					</div>
				</div>
				<div class="inputContainer">
					<div class="txtInput">目标添加剂比例</div>
					<div class="input"><input type="number"  id="targetAdd" min="0.01" max="100" placeholder="数据介于0.01~100.00之间" >
					</div>
				</div>
				<div class="inputContainer">
					<div class="txtInput">现有釉浆重量</div>
					<div class="input"><input type="number" id="currentWeight" min="0.01"  placeholder="请输入现有釉浆重量" >
					</div>
				</div>
				<div class="inputContainer">
					<div class="confirm"><input class="button" type="button" id="confirm" value="确定">
					</div>
					<div class="reset"><button type="reset" id="reset" value="清除">清除</button>
					</div>			
				</div>
		</form>
	</fieldset>

	<fieldset class="resContainer5">
		<legend>釉浆计算结果区域</legend>
		<div class="inputForm">
			<div class="result">暂无计算</div>
		</div>
		</fieldset>

		<fieldset class="resContainer5">
			<legend>釉浆核算区域</legend>
			<div class="inputForm">
				<ul class="cal" style="list-style:none;margin:0px;padding:0px;">
					<li class="oldWeightCal">原有釉重量=现有釉浆重量/(1+原有添加剂比例)</li>
					<li class="oldAddCal">现有添加剂=(现有釉浆重量X原有添加剂比例)/(1+原有添加剂比例)</li>
					<!-- <li class="targetAddCal">目标添加剂=(现有釉浆重量X目标添加剂比例)/(1+原有添加剂比例)</li> -->
					<!-- <li2>需添加添加剂重量 = 现有釉浆重量 X (目标添加剂比例 - 原有添加剂比例) / (1 + 原有添加剂比例)</li> -->
				</ul>
			</div>
			</fieldset>

			<fieldset class="resContainer5">
				<legend>计算历史区域</legend>
				<div class="inputForm">
					<ol class="history">
					</ol>
				</div>
				</fieldset>

				<fieldset class="resContainer5">
					<legend>釉料计算器说明</legend>
					<ul>
						<li>釉料计算结果确认准确无误后，可截图存档。</li>
					</ul>
					</fieldset>

</body>
  <script>
		let confirm = document.querySelector('#confirm');
		let clearData = document.querySelector('#reset');
		let oldWeightInner = document.querySelector(".oldWeightCal").innerHTML
		let oldAddInner = document.querySelector(".oldAddCal").innerHTML
		// let targetAddInner = document.querySelector(".targetAddCal").innerHTML
		let cal = document.querySelector(".cal").innerHTML
		let history = document.querySelector(".history").innerHTML
		confirm.onclick = function(){
			
			// if (typeof liLast !== 'undefined') {
			// 	document.querySelector("calLi").remove();
			// }
			if (document.querySelector(".calLi")) {
				document.querySelector(".calLi").remove();
			}
			if (document.querySelector(".calLi2")) {
				document.querySelector(".calLi2").remove();
			}
			
			let a = parseFloat(document.querySelector("#oldAdd").value);
			let b = parseFloat(document.querySelector("#targetAdd").value);
			let c = parseFloat(document.querySelector("#currentWeight").value);
			document.querySelector(".oldWeightCal").innerHTML = oldWeightInner + `=<span class="resCal"> ${c}/(1+${a}%)=${(c/(1+0.01*a)).toFixed(2)}</span>`;
			document.querySelector(".oldAddCal").innerHTML = oldAddInner + `\n=<span class="resCal"> ${c}*${a}%/(1+${a}%)=${(0.01*c*a/(1+0.01*a)).toFixed(2)}</span>`;
			
			if (a<b) {
				let res = 0.01*c*(b-a)/(1+0.01*a);
				document.querySelector(".result").innerHTML = `需添加添加剂重量：<span id="res1">${res.toFixed(2)}</span>`;
				let liLast = document.createElement('li');
				liLast.className="calLi"
				let liLast2 = document.createElement('li');
				liLast2.className="calLi2"
				liLast.innerHTML= `目标添加剂=(现有釉浆重量X目标添加剂比例)/(1+原有添加剂比例)=<span class="resCal"> ${c}*${b}%/(1+${a}%)=${(0.01*c*b/(1+0.01*a)).toFixed(2)}</span>`
				liLast2.innerHTML= `需添加添加剂重量=目标添加剂-现有添加剂=<span class="resCal"> ${(0.01*c*b/(1+0.01*a)).toFixed(2)}-${(0.01*c*a/(1+0.01*a)).toFixed(2)}=${(0.01*c*(b-a)/(1+0.01*a)).toFixed(2)}</span>`;
  			document.querySelector(".oldAddCal").after(liLast2);
				document.querySelector(".oldAddCal").after(liLast);
					
				let historyLi = document.createElement('li');
				historyLi.className="historyLiLi"
				historyLi.innerHTML = `原有添加剂比例:<span class="resCal">${a}%</span>；目标添加剂比例：<span class="resCal">${b}%</span>；现有釉浆重量：<span class="resCal">${c}</span>；需添加添加剂重量：<span class="resCal">${res.toFixed(2)}</span>`
				document.querySelector(".history").append(historyLi);

			} else {
				let res = 0.01*c*(a-b)/(0.01*(1+0.01*a)*b);
				document.querySelector(".result").innerHTML = `需添加原始釉浆重量：<span id="res1">${res.toFixed(2)}</span>`;
				let liLast = document.createElement('li');
				liLast.className="calLi"
				let liLast2 = document.createElement('li');
				liLast2.className="calLi2"
				liLast.innerHTML = `目标釉重量=(现有釉浆重量X原有添加剂比例)/(目标添加剂比例X(1+原有添加剂比例))=<span class="resCal">(${c}*${a}%)/(${b}%*(1+${a}%))=${(0.01*c*a/(0.01*b*(1+0.01*a))).toFixed(2)}</span>`;
				liLast2.innerHTML = `需添釉重量=目标釉重量-现有釉重量=<span class="resCal"> ${(0.01*c*a/(0.01*b*(1+0.01*a))).toFixed(2)}-${(c/(1+0.01*a)).toFixed(2)}=${res.toFixed(2)}</span>`;
  			document.querySelector(".oldAddCal").after(liLast2); // 将 liLast 插入到 <ol> 的最末尾
				document.querySelector(".oldAddCal").after(liLast); // 将 liLast 插入到 <ol> 的最末尾
				let historyLi = document.createElement('li');
				historyLi.className="historyLiLi"
				historyLi.innerHTML = `原有添加剂比例:<span class="resCal">${a}</span>；目标添加剂比例：<span class="resCal">${b}</span>；现有釉浆重量：<span class="resCal">${c}</span>；需添加原始釉浆重量：<span class="resCal">${res.toFixed(2)}</span>`
				document.querySelector(".history").append(historyLi);
			}
		}
		clearData.onclick = function(){
			document.querySelector(".result").innerHTML = '暂无计算';
			document.querySelector(".cal").innerHTML =  cal;
		}
  </script>
</html>